<template>
  <div>
    <el-container>
      <el-header>
        <div class="flex">
          <div>
            自定义档案
          </div>
          <div class="margin-left-sm">
            <el-button
              class="filter-item"
              type="primary"
              size="small"
              icon="el-icon-plus"
              @click="handleCreate"
            >新增档案</el-button>
          </div>
        </div>
        <div class="flex end">
          <el-input
            v-model="queryList.SearchKey"
            placeholder="档案名称"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleFilter"
            />
          </el-input>
        </div>
      </el-header>
      <el-main class=" main-full-height-nofooter  bg-white">
        <HelpTips v-if="tableList.length<=0" :page-name="'customArchives'" style="text-align:center;width:500px;margin:auto" />
        <el-row :gutter="10">
          <el-col v-for="item in tableList" :key="item.index" :xs="12" :sm="8">
            <el-card>
              <div
                :class="
                  'padding-lr-sm bold border-bottom bg-blue-light flex-between text-normal ' +
                    'bg-blue-light'
                "
                style="min-height:36px;height:36px;"
              >
                <span>{{ item.index }}</span>
                <div class="flex">
                  <el-button type="text" @click="handleUpdate(item)">
                    <i class="el-icon-edit" />修改</el-button>
                  <el-button type="text" @click="handleDel(item)">
                    <i class="el-icon-delete" />删除</el-button>
                </div>
              </div>
              <div class="flex padding-sm">
                <div>
                  <div class="padding-tb-sm">
                    <span class="grey">名称：</span><span class="bold">{{ item.ArchivesName }}</span>
                  </div>
                  <div>
                    <span class="grey">编码：</span><span class="bold">{{ item.ArchivesCode }}</span>
                  </div>
                </div>
                <div>
                  <el-button type="text" @click="pushFileDetails(item.Id)">
                    进入档案</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

      </el-main>
    </el-container>
    <AddFile ref="addFileRef" @success="opSuccess" />
  </div>
</template>
<script>
import {
  getCustomArchivesList,
  delCustomArchives
} from '@/api/customarchives/customarchives'
import AddFile from './addfile'
import HelpTips from '@/views/components/common/helptips/help'
export default {
  components: { AddFile, HelpTips },
  data() {
    return {
      tableList: [],
      queryList: {
        SearchKey: '',
        PageIndex: 1,
        PageSize: 20
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      var _this = this
      getCustomArchivesList(_this.queryList).then(res => {
        if (res.IsSuccess) {
          _this.tableList = res.Data
        }
      })
    },
    pushFileDetails(Id) {
      this.$router.push({
        path: '/baseconfig/customarchives/filedetails/',
        name: '文件详情',
        params: {
          Id: Id
        }
      })
    },
    opSuccess() {
      this.getData()
    },
    handleCreate() {
      this.$refs.addFileRef.addShow()
    },
    handleUpdate(row) {
      this.$refs.addFileRef.updateShow(row)
    },
    handleDel(row) {
      var _this = this
      this.$confirm('确认是否删除该数据和该档案下的明细?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delCustomArchives(row.Id).then(res => {
            this.$message({
              message: res.Msg,
              type: 'success',
              duration: 5 * 1000
            })
            this.$nextTick(() => {
              _this.getData()
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleFilter() {}
  }
}
</script>
<style lang="scss" scoped></style>
